<template>
    <div class='basic-content'>
        <el-form :model="basicForm" 
            :rules="basicRules" 
            ref="basicForm" 
            label-position="left" 
            label-width="80px" 
            class="register-form">
            <h2>基本信息</h2>

            <el-form-item label="门牌号" prop='detailAddress'>
                <el-input v-model="basicForm.detailAddress"
                    style='width:332px;'></el-input>
            </el-form-item>

            <el-form-item label="经度" prop='longitude' style='display: none;'>
                <el-input v-model="basicForm.longitude"></el-input>
            </el-form-item>

            <el-form-item label="维度" prop='latitude' style='display: none;'>
                <el-input v-model="basicForm.latitude"></el-input>
            </el-form-item>

            <el-form-item label="水店地址">
                <el-amap-search-box :on-search-result='onSearchResult'></el-amap-search-box>
                <el-amap class='amap' vid='amap' 
                    :center='center' 
                    :events='events' 
                    :zoom='zoom'>
                    <el-amap-marker v-for='marker in markers' :position='marker'></el-amap-marker>
                </el-amap>
            </el-form-item>

            <el-row>
                <el-col :span='11'>
                    <el-form-item prop='coverPhotoUrl'
                        :rules="[{
                            required: true, message: '请上传水店外观图'
                        }]">
                        <p class='little-label'>水店外观图</p>
                        <upload @getUrl='onGetOutsideUrl'
                            :img='basicForm.coverPhotoUrl'
                            class='left-img'
                            ref='outsideUrl'></upload>
                    </el-form-item>
                </el-col>

                <el-col :span='13'>
                    <el-form-item prop='detailPhotoUrl'
                        :rules="[{
                            required: true, message: '请上传水店内部图'
                        }]">
                        <p class='little-label'>水店内部图</p>
                        <upload @getUrl='onGetinsideUrl'
                            class='left-img'
                            ref='insideUrl'></upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class='btn-group'>
                <el-button type='primary' @click='onPost("basicForm")' style='margin-left: 0px;'>提交</el-button><el-button @click='onReset' style='margin-left: 20px;'>重置</el-button>
            </div>
        </el-form>
        
        <!-- <screen-shot>
        </screen-shot> -->
    </div>
</template>

<script>
    import EditJs from './Edit.js';
    module.exports = EditJs;
</script>

<style scoped lang='less'>
    .basic-content {
        margin-top: 20px;
    }
    .amap {
        width: 660px;
        height: 340px;
    }
    .el-form-item {
        margin: 30px 0;
    }
    .btn-group {
        margin-left: -10px;
        .el-button {
            padding: 10px 30px;
        }
    }
</style>